<template>
  <div class="punch">
    <div class="punch-top">
      <div class="punch-title">
        <div class="punch-text">值班打卡</div>
      </div>
      <div class="punch-info-warp">
        <div class="punch-info-inner">
          <div class="punch-btn" @click="iSpunch('go_work')" v-if="goWorkBtn == 1">上班打卡</div>
          <div class="punch-btn" @click="iSpunch('off_work')" v-else-if="goWorkBtn == 2">下班打卡</div>
          <div class="punch-btn punched-btn" v-else-if="goWorkBtn == 3">今日已打卡</div>
        </div>
        <!-- <div class="punch-info-inner">
          <div class="punch-btn" @click="punch('off_work')" v-if="offWorkBtn">下班打卡</div>
          <div class="punch-btn punched-btn" v-else>已经打卡</div>
          <div class="punch-info">
            <div class="punch-info-time">{{offWorkTime}}</div>
          </div>
        </div> -->
      </div>
      <div class="punch-info-geography">
        <div class="word-info" v-if="goWorkTime != ''">
          <div class="word-time">上班打卡时间：{{goWorkTime}}</div>
          <div class="word-address">上班打卡地址：{{goWorkAddress}}</div>
          <div class="word-state">上班打卡状态：<span :class="{'green':goWordState == '正常','red':goWordState == '迟到'}">{{goWordState}}</span></div>
        </div>
        <div class="word-info" v-if="offWorkTime != ''">
          <div class="word-time">下班打卡时间：{{offWorkTime}}</div>
          <div class="word-address">下班打卡地址：{{offWorkAddress}}</div>
          <div class="word-state">下班打卡状态：<span :class="{'green':goWordState == '正常','red':goWordState == '迟到'}">{{offWordState}}</span></div>
        </div>
      </div>
    </div>
    <div class="punch-bottom">
      <div class="punch-bottom-title">任务打卡</div>
      <div class="punch-list" v-for="(item,index) in taskList" :key="index">
        <div class="punch-list-left">
          <div class="task-name">{{item.name}}</div>
          <div class="executive">执行人：<span v-for="(executive,num) in item.executor_list" :key="index">{{executive}}   </span></div>
          <div class="state">状态：{{item.status_name}}</div>
        </div>
        <div class="punch-list-right">
          <div class="punch-list-right-btn" @click="punch('test', item.id , index)" v-if="item.is_daka == 0">打卡</div>
          <div class="punch-list-right-btn punched" v-else>已打卡</div>
        </div>
      </div>
    </div>
    <div class="punch-nav">
      <div class="leave" @click="navigateToLeave"> 请假</div>
      <div class="punch-annal" @click="navigateToPunchRecord">打卡记录</div>
    </div>
  </div>
</template>

<script>
import QQMapWX from '../../../utils/qqmap-wx-jssdk.min.js'

export default {
  data(){
    return{
      taskList: [],
      address: '',
      latitude: '',
      longitude: '',
      task_info_id: '',
      goWorkAddress: '',
      goWordState: '',
      offWorkAddress: '',
      offWordState: '',
      goWorkTime: '',
      offWorkTime: '',
      goWorkFlag: false,
      offWorkFlag: false,
      goWorkBtn: 1,
    }
  },
  onShow(){
   this.reqTaskInfoList();
   this.getUserPosition();
   this.reqDakaStatus();
  },
  methods: {
    //打开确定
    iSpunch(type){
      var This = this;
      wx.showModal({
        title: '提示',
        content: '确定要打卡？',
        success (res) {
          if (res.confirm) {
            This.punch(type);
          } 
        }
      })
    },
    //打卡
    async punch(punchType,taskId = '',index = ''){
      let userToken = wx.getStorageSync('userToken');
      let params = {
        user_token: userToken,
        type: punchType,
        task_info_id:taskId,
        Longitud: this.longitude,
        Latitude: this.latitude,
        address_detail: this.address,
      }
      let res = await this.$api.postUserDaka(params);
      if(res.data.level == "success"){
        if(punchType == 'go_work'){
          let time = res.data.data.created_at.split(' ')[1];
          this.goWorkTime = time;
          let timeStr1 = time.split(':')[0].replace(/^0/,'');
          let timeStr2 = time.split(':')[1].replace(/^0/,'');
          if(timeStr1 > 9 && timeStr2 > 0){
            this.goWordState = '迟到';
          }else{
            this.offWordState = '正常';
          }
          this.goWorkBtn = 2;
          this.goWorkAddress = this.address;
        }else if(punchType == 'off_work'){
          let time = res.data.data.created_at.split(' ')[1];
          this.offWorkTime = time;
          let timeStr = time.split(':')[0].replace(/^0/,'');
          if(timeStr < 18){
            this.offWordState = '早退';
          }else{
            this.offWordState = '正常';
          }
          this.goWorkBtn = 3;
          this.offWorkAddress = this.address;
        }else if(punchType == 'test'){
          wx.showToast({
            title: res.data.message,
            icon: 'none',
            duration: 1000
          })
          this.taskList[index].is_daka = 1;
        }
      }else{
        wx.showToast({
          title: res.data.message,
          icon: 'none',
          duration: 1000
        })
      }
    },
    //获取上班打开信息
    async reqDakaStatus(){
      let userToken = wx.getStorageSync('userToken');
      let params = {
        user_token: userToken,
      }
      let res = await this.$api.getDakaStatus(params);
      if(res.data.level == "success"){
        if(res.data.data.go_work == 1){
          this.goWorkBtn = 2;
          let time = res.data.data.go_work_daka_info.created_at.split(' ')[1];
          this.goWorkTime = time;
          let timeStr1 = time.split(':')[0].replace(/^0/,'');
          let timeStr2 = time.split(':')[1].replace(/^0/,'');
          if(timeStr1 > 9 && timeStr2 > 0){
            this.goWordState = '迟到';
          }else{
            this.offWordState = '正常';
          }
          this.goWorkAddress = res.data.data.go_work_daka_info.address_detail;
        }
        if(res.data.data.off_work == 1){
          this.goWorkBtn = 3;
          let time = res.data.data.off_work_daka_info.created_at.split(' ')[1];
          this.offWorkTime = time;
          let timeStr = time.split(':')[0].replace(/^0/,'');
          if(timeStr < 18){
            this.offWordState = '早退';
          }else{
            this.offWordState = '正常';
          }
          this.offWorkAddress = res.data.data.off_work_daka_info.address_detail;
        }
      }else{
        wx.showToast({
          title: res.data.message,
          icon: 'none',
          duration: 1000
        })
      }
    },
    //获取任务列表
    async reqTaskInfoList(){
      let userToken = wx.getStorageSync('userToken');
      let params = {
        user_token: userToken,
      }
      let res = await this.$api.getTaskInfoList(params)
      if(res.data.level == "success"){
        // wx.stopPullDownRefresh()
        let data = res.data.data;
        this.taskList = data;
      }else{
        wx.showToast({
          title: res.data.message,
          icon: 'none',
          duration: 1000
        })
      }
    },
    //获得用户的地理信息
    getUserPosition(){
      var This = this
      // 实例化腾讯地图API核心类
      var qqmapsdk = new QQMapWX({
        key: 'DTYBZ-MNUCV-HQOP3-UD5FF-BLBQT-ATFI2' // 必填
      });
      //1、获取当前位置坐标
      wx.getLocation({
        type: 'wgs84',
        success(res) {
          This.latitude = res.latitude;
          This.longitude = res.longitude;
          //2、根据坐标获取当前位置名称，显示在顶部:腾讯地图逆地址解析
          qqmapsdk.reverseGeocoder({
            location: {
              latitude: res.latitude,
              longitude: res.longitude
            },
            success(addressRes) {
              This.address = addressRes.result.address
            }
          })
        }
      })
    },
   //跳转到打卡记录页面
    navigateToPunchRecord(){
      wx.navigateTo({
        url: '/pages/homeMain/punchRecord/main'
      })
    },
    //跳转到请假
    navigateToLeave(){
      wx.navigateTo({
        url: '/pages/homeMain/leave/main'
      })
    },
  }
}
</script>

<style lang="scss" scoped>
  .punch{
    background-color: #f1f1f1;
    .punch-top{
      background-color: #fff;
      padding: 10rpx 20rpx;
      .punch-title{
        display: flex;
        justify-content: space-between;
        .punch-text{
          height: 60rpx;
          line-height: 60rpx;
          font-size: 32rpx;
          font-weight: bold;
        }
      }
      .punch-info-warp{
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 20rpx;
        .punch-info-inner{
          width: 400rpx;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          .punch-btn{
            width: 200rpx;
            height: 200rpx;
            text-align: center;
            line-height: 200rpx;
            border-radius: 50%;
            background-color: rgb(110, 189, 235);
            font-size: 32rpx;
            color: #fff;
          }
          .punched-btn{
            background-color: rgb(134, 138, 139);
          }
          .punch-info{
            .punch-info-time{
              height: 80rpx;
              line-height: 80rpx;
              text-align: center;
              color: #333;
              font-size: 24rpx;
            }
          }
        }
      }
      .punch-info-geography{
        line-height: 50rpx;
        color: #333;
        font-size: 24rpx;
        margin-top: 40rpx;
        .word-info{
          border-top:1px solid #cccc;
          padding: 6rpx 0;
        }
        .green{
          color: rgb(24, 233, 24);
        }
        .red{
          color: red;
        }
      }
    }
    .punch-bottom{
      padding: 0 20rpx;
      background-color: #fff;
      margin-top: 14rpx;
      .punch-bottom-title{
        height: 80rpx;
        line-height: 80rpx;
        font-size: 32rpx;
        font-weight: bold;
      }
      .punch-list{
        padding: 20rpx;
        display: flex;
        border: 1px solid rgb(110, 189, 235);
        border-radius: 6px;
        margin-bottom: 20rpx;
        .punch-list-left{
          flex: 3;
          div{
            height: 60rpx;
            line-height: 60rpx;
            font-size: 28rpx;
          }
          .task-name{
            font-size: 32rpx;
          }
        }
        .punch-list-right{
          flex: 1;
          display: flex;
          justify-content: flex-end;
          align-items: center;
        }
        .punch-list-right-btn{
          width: 150rpx;
          height: 60rpx;
          line-height: 60rpx;
          font-size: 28rpx;
          text-align: center;
          color: #fff;
          background-color: rgb(110, 189, 235);
          border-radius: 6px;
        }
        .punched{
          background-color: rgb(150, 151, 151);
        }
      }
    }
    .punch-nav{
      position: fixed;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 80rpx;
      text-align: center;
      line-height: 80rpx;
      font-size: 28rpx;
      display: flex;
      background: rgb(110, 189, 235);
      color: #fff;
      .leave,
      .punch-annal{
        flex: 1;
      }
      .leave{
        border-right: 1px solid #fff;
      }
    }
  }
</style>